<template>
	<div style="height: 100%;overflow-y: hidden;overflow-x: hidden;">
		<div style="padding: 10px;border-radius: 16px;background: #fff;margin-bottom: 10px;" class="displayFlexBet">
			<div class="displayFlex">
				<div class="date-item displayFlex">
					<el-select v-model="params.outletId" filterable placeholder="选择排口" :loading="loading"
						@change="changeOutlet">
						<el-option v-for="item in outletList" :key="item.id" :label="item.gasOutletName"
							:value="item.id">
						</el-option>
					</el-select>

					<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
				</div>

				<div class="date-item displayFlex" v-if="params.outletId">
					<el-select v-model="params.defenceId" filterable placeholder="选择防治设施" :loading="loading"
						@change="getWholeProductionEquipmentDateStandingBookList">
						<el-option v-for="item in defenceList" :key="item.defenceId" :label="item.defenceName"
							:value="item.defenceId">
						</el-option>
					</el-select>

					<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
				</div>

				<div class="date-item displayFlex" style="margin-left: 20px;">
					<el-date-picker v-model="params.year" type="year" placeholder="选择年" format="yyyy"
						style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false"
						value-format="yyyy" @change="getWholeProductionEquipmentDateStandingBookList">
					</el-date-picker>
					<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
				</div>

				<div class="date-item displayFlex" style="margin-left: 20px;">
					<el-date-picker v-model="params.month" type="month" placeholder="选择月"
						style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false" format="MM"
						value-format="MM" @change="getWholeProductionEquipmentDateStandingBookList">
					</el-date-picker>
					<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
				</div>
			</div>


			<el-button type="primary" icon="el-icon-download" size="small" @click="exportExcle">
				导出台账
			</el-button>
		</div>

		<div style="background: #fff;padding: 20px;border-radius: 16px;height: calc(100% - 80px);">
			<el-table :data="tableData" style="width: 100%;" height="100%" size="mini">
				<el-table-column label="防治设施名称" prop="defenceName">
				</el-table-column>
				<el-table-column label="编码" prop="defenceNo">
				</el-table-column>
				<el-table-column label="防治设施型号" prop="defenceModel">
				</el-table-column>
				<el-table-column label="主要防止设施规格参数" width="290">
					<template slot-scope="scope">
						<div v-for="(item,index) in scope.row.parameterList">
							<span>{{item.parameterName}}：</span>
							<span>{{item.designValueStr}}</span>
							<span>{{item.unitValue}}</span>
						</div>
					</template>
				</el-table-column>

				<el-table-column label="运行状态">
					<el-table-column prop="startTimeStr" label="开始时间">
					</el-table-column>
					<el-table-column prop="endTimeStr" label="结束时间">
					</el-table-column>
					<el-table-column prop="workStatusStr" label="是否正常">
					</el-table-column>
				</el-table-column>

				<el-table-column label="污染排放情况" width="200">
					

					<el-table-column prop="smokeVolume" label="烟气量（m3/h）">
					</el-table-column>
					<el-table-column prop="pollutionName" label="污染因子治理效率">
						<template slot-scope="scope">
							<div v-for="(item,index) in scope.row.pollutionList">
								<!-- <div>{{item.smokeVolume}}</div> -->
								<span>{{item.pollutionName}}：</span>
								<span>{{item.qty}}</span>
								<span>%</span>
							</div>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="qty" label="治理效率（%）">
					</el-table-column>
					<el-table-column prop="" label="数据来源">
					</el-table-column> -->
				</el-table-column>

				<el-table-column label="排气筒高度（m）" prop="gasOutletHeight">
				</el-table-column>
				<el-table-column label="排口温度（℃）" prop="gasOutletTemperature">
				</el-table-column>
				<el-table-column label="压力（kPa）" prop="gasOutletPressure">
				</el-table-column>
				<el-table-column label="排放时间（h）" prop="outletTime">
				</el-table-column>
				<el-table-column label="耗电量（kWh）" prop="electricityConsumption">
				</el-table-column>

				<el-table-column label="副产物" width="250">
					<template slot-scope="scope">
						<div v-for="(item,index) in scope.row.sideProductList">
							<span>{{item.wasteName}}：</span>
							<span>{{item.amount}}</span>
							<span>{{item.unitValue}}</span>
						</div>
					</template>
				</el-table-column>

				<el-table-column label="药剂情况" width="250">
					<template slot-scope="scope">
						<div v-for="(item,index) in scope.row.materialList">
							<span>{{item.materialName}}：</span>
							<span>{{item.qty}}</span>
							<span>{{item.unitValue}}</span>
						</div>
					</template>
				</el-table-column>

			</el-table>
		</div>
	</div>
</template>

<script>
	import moment from 'moment'
	import SnowflakeId from "snowflake-id";

	let spanArr = []
	let position = 0

	let that
	export default {
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					outletId: '',
					defenceId: '',
				},
				loading: false,
				outletList: [],
				defenceList: [],
				tableData: [],
				monthDate: "",

			}
		},
		created: function() {},
		mounted: function() {
			that = this

			let monthDate = that.getQueryString("monthDate")
			that.params.ticketId = that.$store.state.token
			that.params.year = monthDate.split("-")[0]
			that.params.month = monthDate.split("-")[1]

			that.getGasOutletBaseList()
			//that.pageProductionEquipmentBase()

			//that.getDet()
		},

		methods: {
			changeOutlet() {
				that.getDefenceListByOutletId()
			},

			getGasOutletBaseList() {
				that.ajax({
					url: '/gasOutlet/getGasOutletBaseList',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.outletList = result.data
							that.params.outletId = that.getQueryString("outletId")

							that.getDefenceListByOutletId()
						}
					},
				})
			},

			getDefenceListByOutletId() {
				that.ajax({
					url: '/gasOutletLine/getDefenceListByOutletId',
					data: {
						outletId: that.params.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.params.defenceId = result.data.length > 0 ? result.data[0].defenceId : ''
							that.defenceList = result.data
							that.getWholeProductionEquipmentDateStandingBookList()
						}
					},
				})
			},

			//导出危废台账
			exportExcle() {
				let loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				let temp = that.params.year + "-" + that.params.month + "-01";

				//let appPath = "http://192.168.0.105:8081/"
				let appPath = "https://www.weifeibangbang.com/"
				window.open(appPath + '/gasOutlet/createGasStandBookExcel?outletId=' +
					that.params.outletId + "&defenceId=" + that.params.defenceId + "&monthDate=" + temp +
					'&ticketId=' + that
					.params.ticketId)
				loading.close();
			},

			getWholeProductionEquipmentDateStandingBookList() {
				if (!that.params.defenceId) return that.$message.error("请选择防治设施")
				that.ajax({
					url: '/gasOutlet/getWholeGasOutletStandingBookList?ticketId=' + that
						.params.ticketId,
					data: JSON.stringify({
						outletId: that.params.outletId, // 设施id
						defenceId: that.params.defenceId,
						monthDate: that.params.year + "-" + that.params.month + "-01" // 月度时间
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.startTimeStr = item.startTimeStr.split(" ")[0]
								item.endTimeStr = item.endTimeStr.split(" ")[0]
							}
							that.tableData = result.data
							//that.mergeTable(['gasOutletName', 'equipmentModel', 'equipmentNo'], that.tableData)

							console.log(spanArr)
							console.log(that.tableData)
						}
					},
				})
			},


			//当前列column、当前行号row
			arraySpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				let columnArrayIndex = [10, 11, 12, 13, 18, 19, 20, 21, 22, 23]
				position += 1
				//console.log(rowIndex, columnIndex)
				if (columnArrayIndex.indexOf(columnIndex) == -1) { //第一列
					if (rowIndex % spanArr[rowIndex] === 0) {
						return {
							rowspan: spanArr[rowIndex],
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
			},


			handleData(data) {
				let newData = []
				for (let key in data) {
					let maxKey = 0
					let item = data[key]

					for (let item2 of item.materialList) {
						item2.m_qty = item.qty
						item2.m_fullDateStr = item.fullDateStr
					}

					item.materialList = item.materialList || []
					item.pollutionList = item.pollutionList || []
					item.sideProductList = item.sideProductList || []
					item.parameterList = item.parameterList || []
					// if (item.materialList.length == 0) item.materialList = [{}]
					// if (item.parameterList.length == 0) item.parameterList = [{}]
					maxKey = item.materialList.length
					if (item.pollutionList.length > maxKey) maxKey = item.pollutionList.length
					if (item.sideProductList.length > maxKey) maxKey = item.sideProductList.length
					if (item.parameterList.length > maxKey) maxKey = item.parameterList.length

					if (maxKey == 0) {
						newData.push(JSON.parse(JSON.stringify(item)))
						spanArr.push(-1)
					} else {
						for (let i = 0; i < maxKey; i++) {
							let newObj = JSON.parse(JSON.stringify(item))
							if (item.materialList[i]) newObj = Object.assign({}, newObj, item.materialList[i])
							if (item.pollutionList[i]) newObj = Object.assign({}, newObj, item.pollutionList[i])
							if (item.sideProductList[i]) newObj = Object.assign({}, newObj, item.sideProductList[i])
							if (item.parameterList[i]) newObj = Object.assign({}, newObj, item.parameterList[i])
							newData.push(newObj)
							spanArr.push(maxKey)
						}
					}
				}
				return newData
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: 30px !important;
		padding: 0 2px 3px !important;
		font-size: 10px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #333 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 16px !important;

	}

	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>